export class Login {
  private container: HTMLDivElement;
  private form: HTMLFormElement;

  constructor() {
    this.container = document.createElement('div');
    this.container.className = 'login-container';
    
    this.form = document.createElement('form');
    this.form.className = 'login-form';
    this.form.onsubmit = this.handleSubmit.bind(this);

    const title = document.createElement('h2');
    title.textContent = '登录';
    title.className = 'login-title';

    const usernameInput = document.createElement('input');
    usernameInput.type = 'text';
    usernameInput.placeholder = '用户名';
    usernameInput.className = 'login-input';
    usernameInput.required = true;

    const passwordInput = document.createElement('input');
    passwordInput.type = 'password';
    passwordInput.placeholder = '密码';
    passwordInput.className = 'login-input';
    passwordInput.required = true;

    const submitButton = document.createElement('button');
    submitButton.type = 'submit';
    submitButton.textContent = '登录';
    submitButton.className = 'login-button';

    // 添加分割线
    const divider = document.createElement('div');
    divider.className = 'login-divider';
    divider.innerHTML = '<span>或</span>';

    // 创建第三方登录容器
    const thirdPartyContainer = document.createElement('div');
    thirdPartyContainer.className = 'third-party-login';

    // 微信登录
    const wechatBtn = document.createElement('button');
    wechatBtn.type = 'button';
    wechatBtn.className = 'third-party-btn wechat';
    wechatBtn.innerHTML = '💬';
    wechatBtn.title = '微信登录';

    // QQ登录
    const qqBtn = document.createElement('button');
    qqBtn.type = 'button';
    qqBtn.className = 'third-party-btn qq';
    qqBtn.innerHTML = '🐧';
    qqBtn.title = 'QQ登录';

    // 微博登录
    const weiboBtn = document.createElement('button');
    weiboBtn.type = 'button';
    weiboBtn.className = 'third-party-btn weibo';
    weiboBtn.innerHTML = '📱';
    weiboBtn.title = '微博登录';

    // 支付宝登录
    const alipayBtn = document.createElement('button');
    alipayBtn.type = 'button';
    alipayBtn.className = 'third-party-btn alipay';
    alipayBtn.innerHTML = '💰';
    alipayBtn.title = '支付宝登录';

    thirdPartyContainer.appendChild(wechatBtn);
    thirdPartyContainer.appendChild(qqBtn);
    thirdPartyContainer.appendChild(weiboBtn);
    thirdPartyContainer.appendChild(alipayBtn);

    this.form.appendChild(title);
    this.form.appendChild(usernameInput);
    this.form.appendChild(passwordInput);
    this.form.appendChild(submitButton);
    this.form.appendChild(divider);
    this.form.appendChild(thirdPartyContainer);
    this.container.appendChild(this.form);
  }

  private handleSubmit(e: Event) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const username = formData.get('username');
    const password = formData.get('password');
    
    // TODO: 在这里添加实际的登录逻辑
    console.log('Login attempt:', { username, password });
  }

  public render(): HTMLElement {
    return this.container;
  }
} 